import React from 'react'
import {connect} from 'react-redux'
import { Modal, Button, Input, Spin, message } from 'antd'
import {deepFullCopy, messages } from "share/common";
const InputSearch = Input.Search;
import "styles/financial-account/view-info.scss"
import interfaceService from "containers/financial-account/interface-definition/interface-service";

class ViewInfo extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      data: [],
      searchValue: '',
      showData: [],
      loading: false
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.visible) {
      this.setState({ loading: true });
      interfaceService.viewBasisInfo({ groupCode: nextProps.code, segmentTypeEnum: 'BASIC_DAT_DICT' }).then(res => {
        this.setState({
          loading: false,
          data: res.data.rows,
          showData: res.data.rows
        });
      }).catch(e => {
        this.setState({ loading: false });
        message.error(e.response.data.message);
      })
    }
  }

  handleCancel = () => {
    const { close } = this.props;
    this.setState({searchValue: ''});
    close();
  };

  handleSearch = value => {
    const { data } = this.state;
    if(value){
      this.setState({showData: data.filter(item => ~item.dictCode.indexOf(value))})
    } else {
      this.setState({showData: deepFullCopy(data)})
    }
  };


  render(){
    const { showData, loading } = this.state;
    const { title, visible } = this.props;
    return(
      <Modal visible={visible}
             footer={[<Button onClick={this.handleCancel}>{messages('common.cancel')/*取消*/}</Button>]}
             onCancel={this.handleCancel}
             width={500}
             className={'view-info'}
             title={title}>
        <Spin spinning={loading}>
          <InputSearch onChange={e => this.handleSearch(e.target.value)} style={{marginBottom: '10px'}}/>
          <div className={'content-body'}>
            {
              showData.map(item => {
                return <div className={"block-view"}>
                  <div className="title-view">{item.dictName}</div>
                  <span style={{lineHeight:'20px'}}>{item.dictCode}</span>
                </div>
              })
            }
          </div>
        </Spin>
      </Modal>
    )
  }
}

function mapStateToProps(state){
  return {

  }
}

ViewInfo.propTypes = {
  visible: React.PropTypes.bool,
  code: React.PropTypes.string,
  close: React.PropTypes.func,
  title: React.PropTypes.string
};

export default connect(mapStateToProps)(ViewInfo);
